<!--
 * @Author: elfsigin 2714838232@qq.com
 * @Date: 2024-11-15 15:32:41
 * @LastEditors: 来璐 2714838232@qq.com
 * @LastEditTime: 2024-11-17 20:14:46
 * @FilePath: \VUE3-ELEMENT-PLUS\manager-pei\src\components\HelloWorld.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script >
import {Fold,Bell,ArrowDown} from '@element-plus/icons-vue'
import TreeMenu from './TreeMenu.vue';
export default{
  name:'Home',
  components:{
    fold:Fold,
    bell:Bell,
    ArrowDown,
    TreeMenu,
  },
  data(){
    return{
      userInfo:{
        userName:'jason',
        userEmail:'jason@admin.com'
      },
      isCollapse:false,
      noticeCount:0,
      userMenu:[]
    }
  },
    mounted() {
      this.getNoticeCount()
      this.getMenuList()
    
  },
  methods: {
    handleLoginOut(key){
      // console.log(key);
      if(key==="email")
      return
    this.$store.commit('saveUserInfo','')
    this.userInfo=null
    this.$router.push('/login')
    
    },
    toggle(){
      this.isCollapse=!this.isCollapse
     },
     async getNoticeCount(){
      const res=await this.$api.noticeCount()
      this.noticeCount=res
      
     },
     async getMenuList(){
      const res=await this.$api.menuList()
      this.userMenu=res
      
     }
  },

};


</script>

<template>
 
 <div class="basic-layout">
  <div :class="['nav-side',isCollapse?'fold':'unfold']">
    <div class="log">
      <img src="./../assets/logo.png" alt="">
      <span>Manager</span>
    </div>
    <!-- 菜单部分 -->

    <el-menu
        default-active="2"
        class="nav-menu"
        background-color="#001529"
        text-color="#fff"
        :collapse="isCollapse"
        router

      >
      <tree-menu :userMenu="userMenu"></tree-menu>
      
      
      </el-menu>




  </div>
  <div :class="['content-right',isCollapse?'fold':'unfold']">
    
    <div class="nav-top">
      <div class="nav-left">
        <fold class="menu-fold" @click="toggle"></fold>

        <div class="bread">面包屑</div>
      </div>
      
      <div class="user-info">
        <el-badge :is-dot="noticeCount>0 ? true:false "
           class="user-badge"
        >
        <el-icon class="el-icon-bell">
          <bell>
            
          </bell>
          
        </el-icon>
        </el-badge>
        <el-dropdown @command="handleLoginOut">
            <span class="user-link">
              {{ userInfo.userName }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="email">邮箱：{{ userInfo.userEmail }}</el-dropdown-item>
                <el-dropdown-item command="lgout"> 退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
    </div>
    <div class="wrapper">
      <div class="main-page">
        <router-view></router-view>
      </div>
    </div>
  </div>
 </div>
</template>

<style lang="scss" scoped >
.basic-layout{
  position:relative;
  
  .nav-side{
    position: fixed;
    width: 200px;
    height:100vh;
    background-color: #001529;
    color:#fff;
    // overflow-y: auto;
    transition: width 0.5s;
    .log{
      display: flex;
      align-items: center;
      font-size: 18px;
      width: 100%;
      height: 50px;
      img{
        margin: 0 15px;
        width: 32px;
        height: 32px;
      }
    }
   .nav-menu{
    .menu-setting{
      width: 20px;
      height:  20px;
      margin-right: 12px;
    }
    border-right: none;
    height: calc(100vh - 50px);
   }
   &.fold{
    width:64px
   }
   &.unfold{
    width:200px
   }
  }
  .content-right{
    margin-left: 200px;
    &.fold{
          margin-left:64px
        }
    &.unfold{
      margin-left:200px
    }
    .nav-top{
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 0 20px;
      .nav-left{
        display: flex;
        align-items: center;
        .menu-fold{
          width: 25px;
          height: 25px;
          margin-right: 10px;
          }
          z-index: 10;
      }
      .user-info{
        display: flex;
        align-items: center;
        .user-badge{
          line-height: 30px;
          margin-right: 15px;
        }
        .user-link{
          
          cursor: pointer;
          color:#409fff;
        }
      }
     
    }
  }
    .wrapper{
      height: calc(100vh - 50px);
      background: #eef0f3;
      padding: 20px;
      .main-page{
        height: 100%;
        background-color: #fff;
        
      }
    
    }
   
}
</style>
 